<template>
  <div class="serviceContainer">
    <div class="service">
        <!-- 会话内容 -->
        <div class="area" ref="scrollDiv">
            <!-- 会话时间 -->
            <div class="date">
                <span>{{ time }}</span>
            </div>
            <!-- 会话内容 -->
            <div class="content">
                <!-- 客服会话 -->
                <div class="robot">
                    <div class="pic">
                        <img src="../assets/机器人.png" alt="">
                    </div>
                    <div class="chatInfo">
                        您好，智能客服为您服务，有什么问题不妨问问我吧~
                        您好，智能客服为您服务，有什么问题不妨问问我吧~
                    </div>
                </div>
                <div class="question">
                    <div class="question_top">
                        <div>
                            <i class="iconfont icon-wentidan"></i>猜你想问
                        </div>
                        <div style="cursor: pointer;">
                            <i class="iconfont icon-huanyihuan"></i>换一换
                        </div>
                    </div>
                    <!-- 问题列表 -->
                    <div class="question_list">
                        <div class="question_item">
                            <div>如何申请售后</div>
                            <i class="iconfont icon-dayuhao"></i>
                        </div>
                        <div class="question_item">
                            <div>光华售后服务政策</div>
                            <i class="iconfont icon-dayuhao"></i>
                        </div>
                        <div class="question_item">
                            <div>数码类电池换新服务介绍</div>
                            <i class="iconfont icon-dayuhao"></i>
                        </div>
                        <div class="question_item">
                            <div>如何查询手机激活时间</div>
                            <i class="iconfont icon-dayuhao"></i>
                        </div>
                        <div class="question_item">
                            <div>家居类产品如何申请安装</div>
                            <i class="iconfont icon-dayuhao"></i>
                        </div>
                    </div>
                </div>
                <!-- 用户会话 -->
                <div class="user" v-for="(item,index) in userChatInfos" :key="index">
                    <!-- 用户头像 -->
                    <div class="userPic">
                        <img src="http://localhost:9090/file/fb99c2ca9ce147158fe30b40e2d3e697.jpg" alt="">
                    </div>
                    <!-- 用户会话信息 -->
                    <div class="userChatInfo">
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
        <!-- 推荐问题 -->
        <div class="introduce">
            <div class="toLeft"  @click="toLeft" :disabled="!disabled">
                <i class="iconfont icon-xiaoyuhao"></i>
            </div>
            <div class="aboutsContainer">
                <div class="abouts" :class="{to_right:right,to_left:left}" @click="getAbout">
                    <span v-for="(item,index) in abouts" :key="index" :data-index="index">{{ item }}</span>
                </div>
            </div>
            <div class="toRight"  @click="toRight" :disabled="disabled">
                <i class="iconfont icon-dayuhao"></i>
            </div>
        </div>
        <!-- 会话操作 -->
        <div class="option">
            <div class="optionA">
                <input 
                type="text" 
                placeholder="请输入" 
                v-model="inputValue" 
                maxlength="40" 
                >
                <i class="iconfont icon-xiaolian"></i>
                <i class="iconfont icon-icon_tianjia"></i>
            </div>
            <div class="optionB">
                <div class="privacy">隐私政策</div>
                <div class="devide"></div>
                <div class="end" @click="closeChat">结束会话</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            time:'',
            userChatInfos:[
                
            ],
            abouts:[
                '发货时效',
                '数码新品购买攻略',
                '查询订单',
                '查询保修',
                '【视频】产品使用教程',
                '光华至尊VIP会员'
            ],
            inputValue:'',
            left:false,
            right:false,
            disabled:false
        }
    },
    methods:{
        // 获取当前会话时间 （精确到时、分）
        getServiceTime(){
            let date=new Date()
            let h=date.getHours() //获取小时
            let m=date.getMinutes() 
            //获取分钟
            if(m<10){
                m='0'+m
            }
            this.time=`${h}:${m}`
        },
        // 搜索框按下回车按钮
        handkeyCode(e) {
            // console.log(e); // 打印出按键后的信息
            if(e.keyCode === 13 || e.keyCode === 32){
                console.log('触发了回车/空格键');
                this.userChatInfos.push(this.inputValue)
                this.inputValue=''
                this.handleScrollBottom()
            }
        },
        // 滚动到底部
        handleScrollBottom() {
            this.$nextTick(() => {
                let scrollElem = this.$refs.scrollDiv;
                scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
            });
        },
        // 词条向右或向左动画
        toLeft(){
            this.disabled=false
            this.right=false
            this.left=true
        },
        toRight(){
            this.disabled=true
            this.right=true
            this.left=false
        },
        // 推荐问题事件委托
        getAbout(e){
            let index=e.target.getAttribute('data-index')
            // console.log(this.abouts[index]);
            this.userChatInfos.push(this.abouts[index])
            this.handleScrollBottom()
        },
        // 结束会话
        closeChat(){
            console.log("关闭浏览器");
            var userAgent = navigator.userAgent;
            if (userAgent.indexOf("MSIE") > 0) {
                if (userAgent.indexOf("MSIE 6.0") > 0) {
                window.opener = null;
                window.close();
                } else {
                window.open("", "_top");
                window.top.close();
                }
            } else if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
                window.location.href = "about:blank "; //火狐默认状态非window.open的页面window.close是无效的
                //window.history.go(-2);
            } else {
                window.opener = null;
                window.open("about:blank", "_self");
                window.close();
            }
        }
    },
    created(){
        document.title='人工客服'
        //开启监听键盘按下事件
        window.addEventListener('keydown', this.handkeyCode, true)
    },
    mounted(){
        this.getServiceTime()
        this.handleScrollBottom()
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.serviceContainer{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* position: relative; */
}
.service{
    width: 375px;
    height: 651px;
    background-color: rgb(247,250,252);
    margin: 4vh auto;
}
/* 会话区域 */
.area{
    width: 100%;
    height: 486px;
    /* background-color: orange; */
    overflow: auto;
}
/* 会话时间 */
.date{
    width: 100%;
    height: 62px;
    text-align: center;
    line-height: 62px;
}
.date span{
    color: #96a1ad;
    padding: 5px;
    font-size: 12px;
    border-radius: 20px;
    background-color: #ebf1f7;
}
/* 会话内容 */
.content{
    width: 100%;
    height: 424px;
}
/* 商家会话 */
.robot{
    width: 330px;
    margin-bottom: 20px;
    display: flex;
}
.pic{
    width: 50px;
    height: 50px;
    /* background-color: pink; */
}
.pic img{
    margin-left: 5px;
    margin-top: 5px;
    width: 40px;
    height: 40px;
}
.chatInfo{
    font-size: 14px;
    padding: 5px 20px;
    width:280px;
    border-radius: 10px;
    display: flex;
    background-color: white;
}
/* 用户会话 */
.user{
    width: 330px;
    display: flex;
    position: relative;
    margin-bottom: 20px;
    left: 27px;
}
.userPic{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    /* background-color: pink; */
}
.userPic img{
    border-radius: 50%;
    margin-left: 5px;
    margin-top: 5px;
    width: 40px;
    height: 40px;
}
.userChatInfo{
    font-size: 14px;
    border-radius: 10px;
    width: 280px;
    min-height: 50px;
    display: flex;
    padding: 5px 20px;
    background-color: white;
}
/* 猜你想问 */
.question{
    margin-left: 20px;
    width: 320px;
    height: 220px;
    background: white;
    padding: 5px 10px;
    margin-bottom: 20px;
}
.question_top{
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
}
.iconfont{
    margin-right: 5px;
}
/* 问题列表 */
.question_list{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.question_item{
    font-size: 14px;
    width: 100%;
    height: 35px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.question_item i{
    color:#999
}
.introduce{
    width: 100%;
    height: 45px;
    display: flex;
    text-align: center;
}
.aboutsContainer{
    width: 330px;
    height: 25px;
    margin-top: 10px;
    overflow: hidden;
}
.abouts{
    width: 660px;
    height: 25px;
    /* padding: 5px 10px; */
    overflow: auto;
}
/* 定义动画 */
.to_right{
    animation: moveRight 1s ease-in-out forwards;
}
.to_left{
    /* animation-direction: reverse; */
    animation: moveLeft 1s ease-in-out forwards;
}
@keyframes moveRight{
    0%{
        /* margin-left: 0px; */
        transform: translate(0px);
    }
    100%{
        transform: translate(-330px);
    }
}
@keyframes moveLeft{
    0%{
        /* margin-left: 0px; */
        transform: translate(-330px);
    }
    100%{
        transform: translate(0px);
    }
}
.abouts span{
    cursor: pointer;
    display: inline-block;
    height: 20px;
    background-color: #ebf1f7;
    padding: 2px;
    /* padding: 10px; */
    font-size: 12px;
    margin-left: -10px;
    margin-right: 30px;
}
.toLeft,.toRight{
    cursor: pointer;
    margin-top: 10px;
    width: 20px;
}
.option{
    width: 100%;
    height: 122px;
    padding: 10px;
    /* background-color: skyblue; */
}
.optionA{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 355px;
    height: 50px;
    margin-top: -10px;
    /* background-color: pink; */
}
.optionA input{
    padding-left: 10px;
    border: none;
    outline: none;
    border-radius: 10px;
    width: 260px;
    height: 40px;
}
.optionA i{
    font-size: 36px;
    cursor: pointer;
}
.optionB{
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    width: 130px;
    height: 25px;
    /* background-color: orange; */
}
.devide{
    margin-top: 3px;
    width: 2px;
    height: 14px;
    background-color: #999;
}
.privacy,.end{
    background-color: white;
    cursor: pointer;
    width: 60px;
    font-size: 14px;
}

</style>